<template>
  <el-row style="width: 100%; height: 100vh; position: fixed; top: 0; left: 0" ref="viewerContainer" class="demo-viewer">
    <vc-viewer ref="vueCesium" :logo="false" @ready="ready">
      <!-- 区卡片 -->
      <vc-overlay-html
        v-if="!cardShow && !lineBtnShow"
        :position="{ lng: item.x, lat: item.y }"
        v-for="(item, index) in areaProjectVoList"
        :key="index"
        :style="{ 'pointer-events': pointerEvents }"
        @wheel="handleWheel"
        :pixelOffset="{ x: pxToRem(-82), y: pxToRem(-40) }"
      >
        <div class="label-container label-container-var">
          <div class="label-animate-marker_border">
            <p class="label-animate-marker_text title">{{ item.name }}</p>
            <p class="label-animate-marker_text">项目总数：{{ item.projectNum }}</p>
            <p class="label-animate-marker_text">房屋总数：{{ item.buildNum }}</p>
            <p class="label-animate-marker_text">房屋均价：￥{{ item.price }}元</p>
          </div>
        </div>
      </vc-overlay-html>

      <!-- 园区卡片 -->
      <vc-overlay-html
        :vertical-origin="2"
        v-if="cardShow && !lineBtnShow"
        :position="{ lng: item.x, lat: item.y }"
        v-for="(item, index) in filteredData"
        :style="{ 'pointer-events': cardPointerEvents }"
        @wheel="cardHandleWheel"
        :key="index"
        @click="inforShow(item)"
        :pixelOffset="{ x: pxToRem(-31), y: pxToRem(-12) }"
      >
        <div :class="showName == item.name ? 'park-card park-card-active' : 'park-card'">
          {{ item.name }}
        </div>
      </vc-overlay-html>

      <!-- 周边设施 -->
      <vc-overlay-html
        :vertical-origin="2"
        v-if="inforCardShow"
        :position="{ lng: inforCardData.x, lat: inforCardData.y }"
        :style="{ 'pointer-events': cardPointerEvents }"
        @wheel="cardHandleWheel"
        :pixelOffset="{ x: pxToRem(-24), y: pxToRem(-27) }"
      >
        <div class="infor-card">
          <div class="label-animate-marker_border">
            {{ inforCardData.indexs }}
          </div>
        </div>
      </vc-overlay-html>

      <!-- 画线范围内得园区卡片 -->
      <vc-overlay-html
        :vertical-origin="2"
        v-if="isInDrawLineCard"
        :position="{ lng: item.x, lat: item.y }"
        v-for="(item, index) in lineFilteredData"
        :style="{ 'pointer-events': cardPointerEvents }"
        @wheel="cardHandleWheel"
        :key="index"
        @click="inforShow(item)"
        :pixelOffset="{ x: pxToRem(-31), y: pxToRem(-12) }"
      >
        <div :class="showName == item.name ? 'park-card park-card-active' : 'park-card'">
          {{ item.name }}
        </div>
      </vc-overlay-html>

      <!-- 地图划线 -->
      <div class="line-show">
        <vc-drawings
          ref="drawingsCustomRef"
          position="bottom-left"
          @draw-evt="drawEvt"
          :main-fab-opts="mainFabOpts"
          :offset="[0, 0]"
          :editable="editable"
          :clamp-to-ground="clampToGround"
          :polyline-drawing-opts="polylineDrawingOpts"
          :pin-drawing-opts="pinDrawingOpts"
          :rectangle-drawing-opts="rectangleDrawingOpts"
          :drawings="['rectangle']"
        >
          <template #body="drawingActionInstances">
            <div class="custom-drawings">
              <el-row>
                <vc-btn style="margin-right: 10px" color="primary" rounded @click="lineOff">{{ lineBtnShow ? "退出画线" : "地图画线" }}</vc-btn>
                <vc-btn
                  v-if="lineBtnShow"
                  v-for="(drawingActionInstance, index) in drawingActionInstances"
                  :key="index"
                  :color="drawingActionInstance.isActive ? 'positive' : 'primary'"
                  rounded
                  @click="toggle(drawingActionInstance)"
                  >{{ drawingActionInstance.tip.replace("绘制", "") }}</vc-btn
                >
                <vc-btn v-if="lineBtnShow" style="margin-left: 10px" color="red" rounded @click="clear">清除</vc-btn>
              </el-row>
            </div>
          </template>
        </vc-drawings>
      </div>
    </vc-viewer>
  </el-row>
</template>

<script setup>
import { ref, shallowRef } from "vue";
import busEmitter from "@/utils/bus";
import { selectDrawList } from "@/api/gisHouseAnalysAlert";
import { pxToRem } from "@/utils/index";
const lineShow = ref(false);
const drawingsCustomRef = ref(null);
const VCCesium = shallowRef(null); // 原生cesium实例
const VCViewer = shallowRef(null); // vue-cesium-viewer实例
const emits = defineEmits(["drawPolygon"]); //掉父组件方法
const areaProjectVoList = ref([]); //市区数据
const projectSortList = ref([]); //房屋数据
const cardShow = ref(false); //园区卡片是否显示
const filteredData = ref([]); //过滤后的园区卡片数组
const lineFilteredData = ref([]); //画线的园区卡片数组
const lineCardShow = ref(false); //画线的园区卡片是否显示
const lineBtnShow = ref(false); //画线的园区卡片是否显示
const pointerEvents = ref("auto");
const cardPointerEvents = ref("auto");
const scrollTimer = ref(null);
const cardScrollTimer = ref(null);
const vueCesium = ref(null); // cesium-domref
const collectionPolylineData = ref([]); // collection-polyline数据list
const polylineData = ref([]); // polyline数据list
const collectionPolygonsData = ref([]); // collection-polygon数据list
const inforCardShow = ref(false); // 周边设施卡片是否显示
const inforCardData = ref({}); // 周边设施数据
const namesArrayCity = ref([]);
const showName = ref("");
const isInDrawLineCard = ref(false); // 是否显示画线内的园区卡片dom

// 地铁线路颜色
const colors = {
  "1号线": "#E4011C",
  "2号线": "#00A86B",
  "3号线": "#51B8B5",
  "4号线": "#49017E",
  "6号线": "#D81571",
  "9号线": "#128FE3",
  "10号线": "#20A83D",
};

const busCanvas = ref(null);
const subwayCanvas = ref(null);
const schoolCanvas = ref(null);
const sqCanvas = ref(null);
const sqCenterCanvas = ref(null);
const hospitalCanvas = ref(null);
const riverCanvas = ref(null);

// 监听兄弟组件传值
busEmitter.on("borderFun", (data) => {
  if (data == "清空数据") {
    VCViewer.value.entities.removeAll();
    cardShow.value = false;
    VCViewer.value.camera.flyTo({
      destination: VCCesium.value.Cartesian3.fromDegrees(123.4, 41.8, 30000),
      orientation: {
        heading: VCCesium.value.Math.toRadians(0),
        pitch: VCCesium.value.Math.toRadians(-90),
        roll: 0.0,
      },
      duration: 0, // 飞行动画的持续时间，单位为秒
    });
  } else {
    areaProjectVoList.value = data.areaProjectVoList;
    projectSortList.value = data.projectSortList;
  }
  if (lineBtnShow.value) {
    lineOff();
  }
});

// 点击地图划线
const lineOff = (val) => {
  lineBtnShow.value = !lineBtnShow.value;
  if (!lineBtnShow.value) {
    lineFilteredData.value = [];
  }
  drawingsCustomRef.value.clearAll();
};
const clear = (val) => {
  lineFilteredData.value = [];
  drawingsCustomRef.value.clearAll();
};
const toggle = (drawingActionInstance) => {
  clear();
  drawingsCustomRef.value.toggleAction(drawingActionInstance.name);
};
const drawEvt = async (e, viewer) => {
  if (e.finished) {
    // 取前4项
    const tempArr = e.polygonPositionsDegreesArray.slice(0, 4);
    const polygonList = tempArr.map((coord) => {
      return {
        x: coord[0],
        y: coord[1],
      };
    });
    if (tempArr?.length) {
      isInDrawLineCard.value = true;
      let { data } = await selectDrawList({
        polygonList,
        sort: 1,
      });
      lineFilteredData.value = data.projectSortList;
      busEmitter.emit("getListData", data);
      busEmitter.emit("getSwiperEchart", data);
      busEmitter.emit("getpieEchart", data);
    }
  }
};

// 1显示项目数  2显示均价
// busEmitter.on("coverageFun", (type) => {
//   if (type == 1) {
//     generateHeatmapFun(type);
//   } else if (type == 2) {
//     generateHeatmapFun(type);
//   }
// });

busEmitter.on("inforFun", (type) => {
  console.log(type);
  if (type == 1 || type == 2) {
    if (type == 2) {
      showName.value = "";
    }
    inforCardShow.value = false;
  } else {
    inforCardShow.value = true;
    inforCardData.value = type;
    careamFlyTo([type.x, type.y]);
  }
});

// 监听兄弟组件传值

// 滚动样式设置
const handleScroll = (timer, pointerEvents, timeout) => {
  if (timer.value) {
    clearTimeout(timer.value);
  }
  pointerEvents.value = "none";
  timer.value = setTimeout(() => {
    pointerEvents.value = "auto";
  }, timeout);
};

const handleWheel = () => {
  handleScroll(scrollTimer, pointerEvents, 800);
};

const cardHandleWheel = () => {
  handleScroll(cardScrollTimer, cardPointerEvents, 800);
};

// gis初始化
const ready = ({ Cesium, viewer }) => {
  VCCesium.value = Cesium;
  VCViewer.value = viewer;
  // 去除水印
  viewer._cesiumWidget._creditContainer.style.display = "none";
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(123.4, 41.8, 30000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0.0,
    },
  });
  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 300000;
  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0;
  viewer.scene.screenSpaceCameraController.enableTilt = false; // 禁止地图倾斜（旋转）功能
  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
  //  加载离线地图
  viewer.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      // url: "http://192.168.30.225:8088/mapsatellite/{z}/{x}/{y}.jpg", //卫星地图
      url: "http://192.168.30.225:8088/map/{z}/{x}/{y}.png", //二维地图
      fileExtension: "png",
    })
  );

  // 监听相机高度  获取相机范围经纬度
  viewer.camera.changed.addEventListener(function () {
    showParkCardsInViewport();
  });
  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
};

// 获取相机视口范围   展示区域内园区卡片
const showParkCardsInViewport = () => {
  const viewRectangle = VCViewer.value.camera.computeViewRectangle(); // 获取当前视图范围的经纬度信息
  const west = VCCesium.value.Math.toDegrees(viewRectangle.west);
  const south = VCCesium.value.Math.toDegrees(viewRectangle.south);
  const east = VCCesium.value.Math.toDegrees(viewRectangle.east);
  const north = VCCesium.value.Math.toDegrees(viewRectangle.north);
  if (cardShow.value) {
    filteredData.value = projectSortList.value.filter((item) => {
      return item.x >= west && item.x <= east && item.y >= south && item.y <= north;
    });
  }
};

//园区信息
const inforShow = (item) => {
  showName.value = item.name;
  emits("drawPolygon", 2);
  let sto = setTimeout(() => {
    busEmitter.emit("getDetail", item);
    clearTimeout(sto);
  }, 100);
};

//主干道
const highStreentList = (llList) => {
  // 添加轨迹线
  VCViewer.value.entities.add({
    polyline: {
      positions: VCCesium.value.Cartesian3.fromDegreesArray(llList.flatMap((pos) => [pos.x, pos.y])),
      width: 10,
      material: VCCesium.value.Color.fromCssColorString("#808080"),
    },
  });

  // 添加站点
  llList.forEach((position, index) => {
    VCViewer.value.entities.add({
      position: VCCesium.value.Cartesian3.fromDegrees(position.x, position.y),
      label: {
        text: `${position.name}`,
        font: "14pt monospace",
        style: VCCesium.value.LabelStyle.FILL,
        fillColor: VCCesium.value.Color.fromCssColorString("#3B80C3"),
        pixelOffset: new Cesium.Cartesian2(0, -25),
        verticalOrigin: VCCesium.value.VerticalOrigin.BOTTOM,
      },
    });
  });
};

//地铁线路
const subway = (list) => {
  let color = colors[list[0].type];
  // 添加点
  list.forEach((position) => {
    VCViewer.value.entities.add({
      position: VCCesium.value.Cartesian3.fromDegrees(position.x, position.y),
      point: {
        pixelSize: 5,
        color: VCCesium.value.Color.WHITE,
        outlineColor: VCCesium.value.Color.fromCssColorString(color),
        outlineWidth: 1,
      },
      label: {
        text: `${position.name}`,
        font: "14pt monospace",
        style: VCCesium.value.LabelStyle.FILL,
        fillColor: VCCesium.value.Color.fromCssColorString(color),
        pixelOffset: new Cesium.Cartesian2(0, -25),
        verticalOrigin: VCCesium.value.VerticalOrigin.BOTTOM,
      },
    });
  });

  // 添加轨迹线
  VCViewer.value.entities.add({
    polyline: {
      positions: VCCesium.value.Cartesian3.fromDegreesArray(list.flatMap((pos) => [pos.x, pos.y])),
      width: 5,
      material: VCCesium.value.Color.fromCssColorString(color),
    },
  });
};

//公交线
const bus = (llList) => {
  // 添加轨迹线
  VCViewer.value.entities.add({
    polyline: {
      positions: VCCesium.value.Cartesian3.fromDegreesArray(llList.flatMap((pos) => [pos.x, pos.y])),
      width: 5,
      material: VCCesium.value.Color.fromCssColorString("#3B80C3"),
    },
  });

  // 添加站点
  llList.forEach((position, index) => {
    VCViewer.value.entities.add({
      position: VCCesium.value.Cartesian3.fromDegrees(position.x, position.y),
      billboard: {
        image: getImageUrl("gj"),
        scale: 0.15, // 图标大小,
        heightReference: VCCesium.value.HeightReference.CLAMP_TO_GROUND,
      },
      label: {
        text: `${position.name}`,
        font: "14pt monospace",
        style: VCCesium.value.LabelStyle.FILL,
        fillColor: VCCesium.value.Color.fromCssColorString("#3B80C3"),
        pixelOffset: new Cesium.Cartesian2(0, -25),
        verticalOrigin: VCCesium.value.VerticalOrigin.BOTTOM,
      },
    });
  });
};

//商圈
const district = (list) => {
  //覆盖面
  sqCanvas.value = VCViewer.value.entities.add({
    polygon: {
      hierarchy: VCCesium.value.Cartesian3.fromDegreesArray(list.flatMap((pos) => [pos.x, pos.y])),
      height: 0, // 覆盖地表
      extrudedHeight: 0, // 确保标签位于多边形顶部
      material: VCCesium.value.Color.fromCssColorString("#FACD79").withAlpha(0.8),
      outline: true, // 显示外边框
      outlineColor: VCCesium.value.Color.fromCssColorString("#51FF00"), // 外边框颜色为绿色
    },
  });

  // 计算覆盖面中心点
  var polyPositions = sqCanvas.value.polygon.hierarchy.getValue(VCCesium.value.JulianDate.now()).positions;
  var polyCenter = VCCesium.value.BoundingSphere.fromPoints(polyPositions).center; //中心点
  polyCenter = VCCesium.value.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);

  sqCenterCanvas.value = VCViewer.value.entities.add({
    position: polyCenter,
    billboard: {
      image: getImageUrl("sq"),
      scale: 0.15, // 图标大小,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    },
    label: {
      text: `${list[3].name}`,
      font: "14pt monospace",
      style: VCCesium.value.LabelStyle.FILL,
      fillColor: VCCesium.value.Color.fromCssColorString("#3B80C3"),
      verticalOrigin: VCCesium.value.VerticalOrigin.BOTTOM,
      pixelOffset: new Cesium.Cartesian2(0, 30),
    },
  });
};

// 学区
const schoolDistrict = (list) => {
  schoolCanvas.value = VCViewer.value.entities.add({
    position: VCCesium.value.Cartesian3.fromDegrees(list.x, list.y),
    billboard: {
      image: getImageUrl("school"),
      scale: 0.15, // 图标大小,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      offset: new Cesium.Cartesian2(0, -10), // 图标偏移量，可以调整以确保logo正确对齐
    },
    label: {
      text: `${list.name}`,
      font: "14pt monospace",
      style: VCCesium.value.LabelStyle.FILL,
      fillColor: VCCesium.value.Color.fromCssColorString("#E4011C"),
      verticalOrigin: VCCesium.value.VerticalOrigin.BOTTOM,
      pixelOffset: new Cesium.Cartesian2(0, 30),
    },
  });

  try {
    list.sqfw.forEach((item) => {
      schoolCanvas.value = VCViewer.value.entities.add({
        position: VCCesium.value.Cartesian3.fromDegrees(item.x, item.y),
        polygon: {
          hierarchy: VCCesium.value.Cartesian3.fromDegreesArray(
            item.value
              .split(";")
              .map(function (coord) {
                var parts = coord.split(",");
                return [parts[0], parts[1]];
              })
              .flat()
          ),
          height: 0, // 覆盖地表
          extrudedHeight: 0, // 确保标签位于多边形顶部
          material: VCCesium.value.Color.fromCssColorString("#FACD79").withAlpha(0.8),
          outline: true, // 显示外边框
          outlineColor: VCCesium.value.Color.fromCssColorString("#51FF00"), // 外边框颜色为绿色
        },
      });

      // 计算覆盖面中心点
      var polyPositions = schoolCanvas.value.polygon.hierarchy.getValue(VCCesium.value.JulianDate.now()).positions;
      var polyCenter = VCCesium.value.BoundingSphere.fromPoints(polyPositions).center; //中心点
      polyCenter = VCCesium.value.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);

      sqCenterCanvas.value = VCViewer.value.entities.add({
        position: polyCenter,
        billboard: {
          image: getImageUrl("shequ"),
          scale: 0.15, // 图标大小,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        },
        label: {
          text: item.type,
          font: "14pt monospace",
          style: VCCesium.value.LabelStyle.FILL,
          fillColor: VCCesium.value.Color.fromCssColorString("#3B80C3"),
          verticalOrigin: VCCesium.value.VerticalOrigin.BOTTOM,
          pixelOffset: new Cesium.Cartesian2(0, 30),
        },
      });
    });
  } catch (error) {}
};

//三甲医院
const threeHospitals = (list) => {
  hospitalCanvas.value = VCViewer.value.entities.add({
    position: VCCesium.value.Cartesian3.fromDegrees(list.x, list.y),
    ellipse: {
      semiMinorAxis: 2000, // 短轴半径，以米为单位
      semiMajorAxis: 2000, // 长轴半径，以米为单位
      height: 0, // 覆盖地表
      material: VCCesium.value.Color.fromCssColorString("#FACD79").withAlpha(0.8),
      extrudedHeight: 0, // 确保标签位于多边形顶部
      outline: true, // 显示外边框
      outlineColor: VCCesium.value.Color.fromCssColorString("#51FF00"), // 外边框颜色为绿色
    },
    billboard: {
      image: getImageUrl("hospital"),
      scale: 0.15, // 图标大小,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      offset: new Cesium.Cartesian2(0, -10), // 图标偏移量，可以调整以确保logo正确对齐
    },
    label: {
      text: `${list.name}`,
      font: "14pt monospace",
      style: VCCesium.value.LabelStyle.FILL,
      fillColor: VCCesium.value.Color.fromCssColorString("#E4011C"),
      verticalOrigin: VCCesium.value.VerticalOrigin.BOTTOM,
      pixelOffset: new Cesium.Cartesian2(0, 30),
    },
  });
};

//一河两岸
const river = (list) => {
  riverCanvas.value = VCViewer.value.entities.add({
    polygon: {
      hierarchy: VCCesium.value.Cartesian3.fromDegreesArray(list.flatMap((pos) => [pos.x, pos.y])),
      height: 0, // 覆盖地表
      material: VCCesium.value.Color.fromCssColorString("#A4CDFF"), // 设置颜色和透明度
    },
  });
};

//相机飞行
const careamFlyTo = (coord) => {
  VCViewer.value.camera.flyTo({
    destination: VCCesium.value.Cartesian3.fromDegrees(coord[0], coord[1], 1000),
    orientation: {
      heading: VCCesium.value.Math.toRadians(0),
      pitch: VCCesium.value.Math.toRadians(-90),
      roll: 0.0,
    },
    duration: 0.5, // 飞行动画的持续时间，单位为秒
    complete: function () {
      showParkCardsInViewport();
    },
  });
};

//删除画线
const clearSubWay = () => {
  VCViewer.value.entities.removeAll();
  // generateHeatmapFun();
};

//动态标签
const getImageUrl = (name) => {
  return new URL(`../../assets/img/gisPage/${name}.png`, import.meta.url).href;
};

busEmitter.on("getCesiumData", (num) => {
  clearSubWay();
  num.orientation;
  //地铁
  if (num.subwayList) {
    num.subwayList.forEach((i) => {
      subway(i);
    });
  }
  // 公交
  if (num.busList) {
    num.busList.forEach((i) => {
      bus(i);
    });
  }
  // 商圈
  if (num.sqList) {
    num.sqList.forEach((i) => {
      district(i);
    });
  }
  //三甲医院
  if (num.threeHospitalsList) {
    num.threeHospitalsList.forEach((i) => {
      threeHospitals(i);
    });
  }
  //学区
  if (num.schoolList) {
    num.schoolList.forEach((i) => {
      schoolDistrict(i);
    });
  }
  //一河两岸
  if (num.yhList) {
    num.yhList.forEach((i) => {
      river(i);
    });
  }
  //主干道
  if (num.highStreentList) {
    num.highStreentList.forEach((i) => {
      highStreentList(i);
    });
  }
  let coord = num.orientation.split(",");
  cardShow.value = true;
  // careamFlyTo(coord);
  showParkCardsInViewport();
});

busEmitter.on("flyxmmc", (item) => {
  inforShow(item)
  VCViewer.value.camera.flyTo({
    destination: VCCesium.value.Cartesian3.fromDegrees(item.x, item.y, 1000),
    orientation: {
      heading: VCCesium.value.Math.toRadians(0),
      pitch: VCCesium.value.Math.toRadians(-90),
      roll: 0.0,
    },
    duration: 0.5, // 飞行动画的持续时间，单位为秒
    complete: function () {
      showParkCardsInViewport();
    },
  });
});
</script>

<style scoped lang="less">
.a .bg-primary,
.a .bg-positive {
  background: var(--vc-primary) !important;
}
.label-container {
  width: 164px;
  height: 80px;
  background: url("@/assets/img/gisPage/card-bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 5px 16px;
  font-size: 12px;
  color: #ffffff;
  user-select: none;

  .title {
    color: #ead77a;
    font-size: 14px;
  }
}

.park-card {
  user-select: none;
  cursor: pointer;
  width: 62px;
  height: 24px;
  background: url("@/assets/img/gisPage/park-card.png") no-repeat;
  background-size: 100% 100%;
  font-size: 12px;
  color: #ffffff;
  line-height: 20px;
  letter-spacing: 1px;
  padding-left: 6px;
  padding-right: 6px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.park-card:hover {
  width: auto;
  height: 24px;
}

.park-card-active {
  background: url("@/assets/img/gisPage/park-card-active.png") no-repeat;
  background-size: 100% 100%;
}

.infor-card {
  user-select: none;
  cursor: pointer;
  width: 48px;
  height: 54px;
  background: url("@/assets/img/gisPage/sort.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: #11768e;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
}
.line-show {
  position: fixed;
  z-index: 2000;
  left: 50px;
  bottom: 20px;
  width: 260px;
  height: 32px;
}
.vc-drawings-container {
  margin: 0 !important;
}
</style>
